<template>

  <!-- 返回按钮  ！！这里返回后的高亮没实现 -->
  <div>
    <el-button style="float: left;" class="el-icon-back warning" type="warning" plain @click="goBack"></el-button>

    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="margin-left: 7%;">
      <!-- 这里也能用to -->
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>lt</el-breadcrumb-item>

      <!-- <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
    <h1 v-if="!updateIsA">预 约 系 统(q)</h1>
    <h1 v-if="updateIsA">预 约 系 统(a)</h1>
    </el-breadcrumb>

    
   

    <el-dropdown class="userHeadImg" style="margin-top: -40px;">
      <div class="header-right">
        <el-avatar>
          <!-- <img src="http://logntao.asia/syt/images/head/
            morenHead.png?e=1668336983&token=zEe97IbyW_Yi
            nOIIKWXyW-DfpWOlWJoy1FbhibXU:WWwAVokgQ0sUVc
            qH1kQ0H5Dww_Q=" alt /> -->

          <img :src="imgUrl" alt />
          <!-- <i class="el-icon-location "> -->
          <!-- </i> -->
        </el-avatar>
        <span>{{userId}}</span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit" command="a" v-if="updateIsQ && isLogIn">
          <router-link to="/updateQ" class="router-link">修改信息(提问者)</router-link>
        </el-dropdown-item>

        <el-dropdown-item icon="el-icon-edit" command="c" v-if="updateIsA && isLogIn">
          <router-link to="/updateA" class="router-link">
            修改信息
          </router-link>
        </el-dropdown-item>

        <label for="login" @click="dialogVisible = true">
          <el-dropdown-item v-if="!isLogIn" icon="el-icon-s-fold" command="e" name="login">登陆</el-dropdown-item>
        </label>

        <label for="logout" @click="logout">
        <el-dropdown-item v-if="isLogIn" icon="el-icon-s-fold" command="b" name="logout">退出</el-dropdown-item>
      </label>
      </el-dropdown-menu>
    </el-dropdown>



    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-row :gutter="20">
        <el-col :span="4" :offset="0"  >
          <span>用户名</span>
        </el-col>
        <el-col :span="15" :offset="0" >
          <el-input type="text" v-model="loginForm.username"> </el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="4" :offset="0"  >
          <span>密码</span>

        </el-col>
        <el-col :span="15" :offset="0" >
          <el-input type="password" v-model="loginForm.password"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="loginByAnswerer" round plain>回答者 登陆</el-button>
        <el-button type="warning" @click="loginByQuestioner" round plain>提问者 登陆</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 放图片 或者i标签 -->
    <!-- <el-avatar :size="50"   >
    <i class="el-icon-location ">
    </i>
</el-avatar>   -->


    <!--    在 el-dropdown 都触发  -->
    <!-- <el-dropdown >
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
   </el-dropdown> -->

  </div>
</template>
<script>
 import qs from 'qs'

  export default {
    name: "myheader",
    data() {
      return {
        // dialogVisible  登陆弹窗
        dialogVisible: false,
        imgUrl:"",
        loginForm: {
          username: "123",
          password: "123"
        },
        loginInfo:{
          info:"登陆！"
        },
        youkeData:{
          user_session:"25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",
          authority:"游客",
          username:"游客",
          userId:"000"
        }
      }
    },
    computed: {
      userId() {
        return this.$cookies.get("username");
      },
      getAuthority() {
        return this.$cookies.get("authority");
      },
      isLogIn() {
        if (this.getAuthority != "Answerer" && this.getAuthority != "Questioner") {
          return false
        }
        return true
      },
      
      updateIsQ() {
        if (this.$cookies.get("authority") == "Questioner") {
          return true
        } 
        return false
      },
      updateIsA() {
        if (this.$cookies.get("authority") == "Answerer") {
          return true
        } return false
      },
    },
    methods: {
      goBack() {
        this.$router.back()
        console.log("后退了")
      },
      // 登陆
      loginByAnswerer(){
        this.dialogVisible = false,
        this.loginA()
        alert(this.loginInfo.info)
        // this.$cookies.set("authority","answerer")
        this.$router.replace("/")
        this.$router.go(0)
      },
      loginByQuestioner(){
        this.dialogVisible = false,
        // 登录请求
        this.loginQ()
        alert(this.loginInfo.info)

        this.$router.replace("/")
        this.$router.go(0)
      },
      // 登陆框显示
      handleClose(done) {
        done()
      },
      logout(){
        alert("登出"),
        this.changYouke()
        this.$router.replace("/")
        this.$router.go(0)
      },

      // 发请求登陆
      loginA(){
        this.$axios.post(this.MYURL + "/login/answerer", qs.stringify(this.loginForm))
                    .then(res => {
                      res=res.data
                      // console.log("res answerer:",res.answerer)
                      this.loginInfo.info=res.msg
                      if(res.msg=="success"){
                        // alert("赋值 success")
                        this.changAnswerer(res.answerer)
                        localStorage.setItem("userData",JSON.stringify(res.answerer))

                        // 
                      }
                    }
                    )
                    .catch(function (error) { alert("请求失败" + error) })
      },

      loginQ(){ 
        this.$axios.post(this.MYURL + "/login/questioner", qs.stringify(this.loginForm))
                    .then(res => {
                      console.log("res questioner:",res)
                      res=res.data

                      this.loginInfo.info=res.msg
                      if(res.msg == "success"){
                        this.changQuesioner(res.questioner)

                        localStorage.setItem("userData",JSON.stringify(res.questioner))

                      }
                    }
                    )
                    .catch(function (error) { alert("请求失败" + error) })
      },

      changYouke(){
        this.$cookies.set("user_session",this.youkeData.user_session)
        this.$cookies.set("authority",this.youkeData.authority)
        this.$cookies.set("username",this.youkeData.username)
        this.$cookies.set("userId",this.youkeData.userId)
        this.$cookies.set("headImg","")

        
        this.$store.state.userData={
          username:"游客"
        }
        
      },
      changAnswerer(data){
        this.$cookies.set("authority","Answerer")
        // console.log("data.authority@@",data)
        this.$cookies.set("username",data.username)
        this.$cookies.set("userId",data.userId)
        this.$cookies.set("headImg",data.head)

        // localStorage.setItem("userData",data)
        console.log("store--userData:",this.$store.state.userData)
      },
      changQuesioner(data){
        // alert("changQuesioner")
        console.log("res.data:",data)
        // this.$cookies.set("authority",data.authority)
        this.$cookies.set("authority","Questioner")
        this.$cookies.set("username",data.username)
        this.$cookies.set("userId",data.userId)
        this.$cookies.set("headImg","")
        // this.$store.state.userData=data
        // localStorage.setItem("userData",data)
        console.log("store--userData:",this.$store.state.userData)
      },

      GetImgUrl() {
        if (this.$cookies.get("headImg") == null) {
          // return require('@/static/img/4a731a90594a4af544c0c25941171jpeg.jpeg')
          return "/img/morenHead.png"                   
          // return "https://s3-cn-south-1.qiniucs.com/alubus-87076-springboot/syt/images/head/morenHead.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=zEe97IbyW_YinOIIKWXyW-DfpWOlWJoy1FbhibXU%2F20211201%2Fcn-south-1%2Fs3%2Faws4_request&X-Amz-Date=20211201T054120Z&X-Amz-Expires=299999&X-Amz-Signature=05cc959d779212bb28cf97235203f668b256d2a861f4674b75491417cb2360c1&X-Amz-SignedHeaders=host"
        }
        // else{
        //   // 请求
        //   // http://localhost:8001/answerer/addHead
        //   this.$axios.post("http://localhost:8001/answerer/getHead",qs.stringify(this.$cookies.get("headImg")))
        //   .then(res => {
        //               if(res ==null){
        //                    return "https://s3-cn-south-1.qiniucs.com/alubus-87076-springboot/syt/images/head/morenHead.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=zEe97IbyW_YinOIIKWXyW-DfpWOlWJoy1FbhibXU%2F20211201%2Fcn-south-1%2Fs3%2Faws4_request&X-Amz-Date=20211201T054120Z&X-Amz-Expires=299999&X-Amz-Signature=05cc959d779212bb28cf97235203f668b256d2a861f4674b75491417cb2360c1&X-Amz-SignedHeaders=host"

        //               }
        //               return res ;
        //             }
        //             )
        //             .catch(function (error) { alert("请求失败" + error) })
        // }

        // console.log(this.$cookies.get("headImg"))
        return this.$cookies.get("headImg")
        // 七牛云 图片地址

      },
    },
    
    mounted() {
      // console.log(this.$cookies.get("userHeader"))
      // console.log("this.updateIsA:",this.updateIsA)
      // console.log("this.updateIsQ:",this.updateIsQ)
      // console.log("this.isLogIn:",this.isLogIn)
      this.imgUrl=this.GetImgUrl()
    },

  }


</script>
<style scoped>
  .myhead {
    background-color: rgb(247, 221, 175);
  }

  .userHeadImg {
    float: right;
    padding-right: 17px;
  }
</style>